<template>
	<view class="container">
		<view class="item-box">
			<view class="title">
				<text>用户数量</text>
			</view>
			<view class="tab-btn">
				<button :class="[user_time=='week' ? 'select' : '']" @click="checkUserTime('week')">本周</button>
				<button :class="[user_time=='month' ? 'select' : '']" @click="checkUserTime('month')">本月</button>
				<button>自定义</button>
			</view>

			<view class="dete-select">
				<uni-datetime-picker type="date" v-model="user_startTime" @maskClick="maskClick($event,'user_startTime')">
					<view class="date-picker">
						<text v-if="user_startTime" class="one-row">{{user_startTime}}</text>
						<text v-else class="placeholder">年/月/日</text>
						<image v-if="user_startTime" @click.stop="user_startTime=''" class="close"
							:src="$img_path('/pagesMine/63.png')" mode="widthFix"></image>
						<image v-else :src="$img_path('/pagesMine/74.png')" mode="widthFix"></image>
					</view>
				</uni-datetime-picker>
				<text>~</text>
				<uni-datetime-picker type="date" v-model="user_endTime" @maskClick="maskClick('user_endTime',$event)">
					<view class="date-picker">
						<text v-if="user_endTime" class="one-row">{{user_endTime}}</text>
						<text v-else class="placeholder">年/月/日</text>
						<image v-if="user_endTime" @click.stop="user_endTime=''" class="close"
							:src="$img_path('/pagesMine/63.png')" mode="widthFix"></image>
						<image v-else :src="$img_path('/pagesMine/74.png')" mode="widthFix"></image>
					</view>
				</uni-datetime-picker>
			</view>
			<view class="charts">
				<ui-echarts style="z-index: 1;" ref="chart" height="530rpx" :option="option" exportBase64></ui-echarts>
			</view>
		</view>


		<view class="item-box">
			<view class="title">
				<text>订单数量</text>
			</view>
			<view class="tab-btn">
				<button :class="[order_time=='week' ? 'select' : '']" @click="checkOrderTime('week')">本周</button>
				<button :class="[order_time=='month' ? 'select' : '']" @click="checkOrderTime('month')">本月</button>
				<button>自定义</button>
			</view>

			<view class="dete-select">
				<uni-datetime-picker type="date" v-model="order_startTime" @maskClick="maskClick('order_startTime',$event)">
					<view class="date-picker">
						<text v-if="order_startTime" class="one-row">{{order_startTime}}</text>
						<text v-else class="placeholder">年/月/日</text>
						<image v-if="order_startTime" @click.stop="order_startTime=''" class="close"
							:src="$img_path('/pagesMine/63.png')" mode="widthFix"></image>
						<image v-else :src="$img_path('/pagesMine/74.png')" mode="widthFix"></image>
					</view>
				</uni-datetime-picker>
				<text>~</text>
				<uni-datetime-picker type="date" v-model="order_endTime" @maskClick="maskClick('order_endTime',$event)">
					<view class="date-picker">
						<text v-if="order_endTime" class="one-row">{{order_endTime}}</text>
						<text v-else class="placeholder">年/月/日</text>
						<image v-if="order_endTime" @click.stop="order_endTime=''" class="close"
							:src="$img_path('/pagesMine/63.png')" mode="widthFix"></image>
						<image v-else :src="$img_path('/pagesMine/74.png')" mode="widthFix"></image>
					</view>
				</uni-datetime-picker>
			</view>
			<view class="charts">
				<ui-echarts style="z-index: 1;" ref="orderChart" height="530rpx" :option="option_order"
					exportBase64></ui-echarts>
			</view>
		</view>
		
		<view class="item-box">
			<view class="title">
				<text>销售金额</text>
			</view>
			<view class="tab-btn">
				<button :class="[money_time=='week' ? 'select' : '']" @click="checkMoneyTime('week')">本周</button>
				<button :class="[money_time=='month' ? 'select' : '']" @click="checkMoneyTime('month')">本月</button>
				<button>自定义</button>
			</view>
		
			<view class="dete-select">
				<uni-datetime-picker type="date" v-model="money_startTime" @maskClick="maskClick('money_startTime',$event)">
					<view class="date-picker">
						<text v-if="money_startTime" class="one-row">{{money_startTime}}</text>
						<text v-else class="placeholder">年/月/日</text>
						<image v-if="money_startTime" @click.stop="money_startTime=''" class="close"
							:src="$img_path('/pagesMine/63.png')" mode="widthFix"></image>
						<image v-else :src="$img_path('/pagesMine/74.png')" mode="widthFix"></image>
					</view>
				</uni-datetime-picker>
				<text>~</text>
				<uni-datetime-picker type="date" v-model="money_endTime" @maskClick="maskClick('money_endTime',$event)">
					<view class="date-picker">
						<text v-if="money_endTime" class="one-row">{{money_endTime}}</text>
						<text v-else class="placeholder">年/月/日</text>
						<image v-if="money_endTime" @click.stop="money_endTime=''" class="close"
							:src="$img_path('/pagesMine/63.png')" mode="widthFix"></image>
						<image v-else :src="$img_path('/pagesMine/74.png')" mode="widthFix"></image>
					</view>
				</uni-datetime-picker>
			</view>
			<view class="charts">
				<ui-echarts style="z-index: 1;" ref="orderChart" height="530rpx" :option="option_money"
					exportBase64></ui-echarts>
			</view>
		</view>
		
		<view class="item-box">
			<view class="title">
				<text>佣金</text>
			</view>
			<view class="tab-btn">
				<button :class="[fenyong_time=='week' ? 'select' : '']" @click="checkFenyongTime('week')">本周</button>
				<button :class="[fenyong_time=='month' ? 'select' : '']" @click="checkFenyongTime('month')">本月</button>
				<button>自定义</button>
			</view>
		
			<view class="dete-select">
				<uni-datetime-picker type="date" v-model="fenyong_startTime" @maskClick="maskClick('fenyong_startTime',$event)">
					<view class="date-picker">
						<text v-if="fenyong_startTime" class="one-row">{{fenyong_startTime}}</text>
						<text v-else class="placeholder">年/月/日</text>
						<image v-if="fenyong_startTime" @click.stop="fenyong_startTime=''" class="close"
							:src="$img_path('/pagesMine/63.png')" mode="widthFix"></image>
						<image v-else :src="$img_path('/pagesMine/74.png')" mode="widthFix"></image>
					</view>
				</uni-datetime-picker>
				<text>~</text>
				<uni-datetime-picker type="date" v-model="fenyong_endTime" @maskClick="maskClick('fenyong_endTime',$event)">
					<view class="date-picker">
						<text v-if="fenyong_endTime" class="one-row">{{fenyong_endTime}}</text>
						<text v-else class="placeholder">年/月/日</text>
						<image v-if="fenyong_endTime" @click.stop="fenyong_endTime=''" class="close"
							:src="$img_path('/pagesMine/63.png')" mode="widthFix"></image>
						<image v-else :src="$img_path('/pagesMine/74.png')" mode="widthFix"></image>
					</view>
				</uni-datetime-picker>
			</view>
			<view class="charts">
				<ui-echarts style="z-index: 1;" ref="orderChart" height="530rpx" :option="option_fenyong"
					exportBase64></ui-echarts>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDataInfo
	} from '@/utils/api/userApi.js'
	export default {
		data() {
			return {
				startTime: '',
				option: {},
				user_time: 'week',
				user_startTime:'',
				user_endTime:'',

				option_order: {},
				order_time: 'week',
				order_startTime:'',
				order_endTime:'',
				
				option_money:{},
				money_time:'week',
				money_startTime:'',
				money_endTime:'',
				
				option_fenyong:{},
				fenyong_time:'week',
				fenyong_startTime:'',
				fenyong_endTime:'',

				series_week: {},
				series_month: {},
				series_startTime:'',
				series_endTime:'',
			};
		},
		onLoad() {
			this.getDataInfo()
		},
		methods: {
			getDataInfo() {
				uni.showLoading({
					title: '加载中...'
				})
				getDataInfo({
					time: 'week'
				}).then(res => {
					uni.hideLoading()
					this.series_week = res.data.series
					this.initCharts_two()
					this.initCharts_order()
					this.initCharts_money()
					this.initCharts_fenyong()
				})
				getDataInfo({
					time: 'month'
				}).then(res => {
					console.log(res)
					uni.hideLoading()
					this.series_month = res.data.series
					// this.initCharts_two()
				})
			},
			checkUserTime(time) {
				this.user_time = time
				this.initCharts_two()
			},
			checkOrderTime(time) {
				this.order_time = time
				this.initCharts_order()
			},
			checkMoneyTime(time) {
				this.money_time = time
				this.initCharts_money()
			},
			
			
			checkFenyongTime(time) {
				this.fenyong_time = time
				this.initCharts_fenyong()
			},
			
			maskClick(props,event) {
				// this[props] = 
				console.log(event,props)
			},

			initCharts_two() {
				let dateArr = this.user_time == 'week' ? this.series_week.user_list.date : this.series_month.user_list.date

				let value = this.user_time == 'week' ? this.series_week.user_list.series.data : this.series_month.user_list
					.series.data
				let t_arr = []
				dateArr.forEach(e => {
					t_arr.push(this.$dayjs(e).format('MM月DD日'))
				})
				this.option = {
					grid: {
						right: 10,
						left: '15%',
						top: '10',
						bottom: '30'
					},
					xAxis: {
						type: 'category',
						data: t_arr,
						position: 'top',
						offset: -10
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: "{value}人"
						},
					},
					series: [{
						data: value,
						type: 'line',
						itemStyle: {
							color: "rgba(231, 42, 42, 1)"
						},
						lineStyle: {
							shadowColor: "rgba(96, 96, 96, 1)",
							shadowOffsetX: 4,
							shadowOffsetY: 6,
							opacity: 1,
							shadowBlur: 18,
						},
						label: {
							show: true,
							position: 'bottom',
							formatter: '{c}人',
							textStyle: {
								fontSize: 12,
								color: '#E72A2A'
							}
						}
					}]
				}
			},

			// 订单数量
			initCharts_order() {
				let dateArr = this.order_time == 'week' ? this.series_week.order_list.date : this.series_month.order_list
					.date

				let value = this.order_time == 'week' ? this.series_week.order_list.series.data : this.series_month
					.order_list.series.data
				let t_arr = []
				dateArr.forEach(e => {
					t_arr.push(this.$dayjs(e).format('MM月DD日'))
				})
				this.option_order = {
					grid: {
						right: 10,
						left: '15%',
						top: '10',
						bottom: '30'
					},
					xAxis: {
						type: 'category',
						data: t_arr,
						position: 'top',
						offset: -10
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: "{value}单"
						},
					},
					series: [{
						data: value,
						type: 'line',
						itemStyle: {
							color: "rgba(231, 42, 42, 1)"
						},
						lineStyle: {
							shadowColor: "rgba(96, 96, 96, 1)",
							shadowOffsetX: 4,
							shadowOffsetY: 6,
							opacity: 1,
							shadowBlur: 18,
						},
						label: {
							show: true,
							position: 'bottom',
							formatter: '{c}单',
							textStyle: {
								fontSize: 12,
								color: '#E72A2A'
							}
						}
					}]
				}
			},

			// 销售金额
			initCharts_money() {
				let dateArr = this.money_time == 'week' ? this.series_week.money_list.date : this.series_month.money_list
					.date

				let value = this.money_time == 'week' ? this.series_week.money_list.series.data : this.series_month
					.money_list.series.data
				let t_arr = []
				dateArr.forEach(e => {
					t_arr.push(this.$dayjs(e).format('MM月DD日'))
				})
				this.option_money = {
					grid: {
						right: 10,
						left: '15%',
						top: '10',
						bottom: '30'
					},
					xAxis: {
						type: 'category',
						data: t_arr,
						position: 'top',
						offset: -10
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: "￥{value}"
						},
					},
					series: [{
						data: value,
						type: 'line',
						itemStyle: {
							color: "rgba(231, 42, 42, 1)"
						},
						lineStyle: {
							shadowColor: "rgba(96, 96, 96, 1)",
							shadowOffsetX: 4,
							shadowOffsetY: 6,
							opacity: 1,
							shadowBlur: 18,
						},
						label: {
							show: true,
							position: 'bottom',
							formatter: '￥{c}',
							textStyle: {
								fontSize: 12,
								color: '#E72A2A'
							}
						}
					}]
				}
			},
			
			
			// 分佣
			initCharts_fenyong() {
				let dateArr = this.fenyong_time == 'week' ? this.series_week.fenyong_list.date : this.series_month.fenyong_list
					.date
			
				let value = this.fenyong_time == 'week' ? this.series_week.fenyong_list.series.data : this.series_month
					.fenyong_list.series.data
				let t_arr = []
				dateArr.forEach(e => {
					t_arr.push(this.$dayjs(e).format('MM月DD日'))
				})
				this.option_fenyong = {
					grid: {
						right: 10,
						left: '15%',
						top: '10',
						bottom: '30'
					},
					xAxis: {
						type: 'category',
						data: t_arr,
						position: 'top',
						offset: -10
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: "￥{value}"
						},
					},
					series: [{
						data: value,
						type: 'line',
						itemStyle: {
							color: "rgba(231, 42, 42, 1)"
						},
						lineStyle: {
							shadowColor: "rgba(96, 96, 96, 1)",
							shadowOffsetX: 4,
							shadowOffsetY: 6,
							opacity: 1,
							shadowBlur: 18,
						},
						label: {
							show: true,
							position: 'bottom',
							formatter: '￥{c}',
							textStyle: {
								fontSize: 12,
								color: '#E72A2A'
							}
						}
					}]
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 22rpx;
		box-sizing: border-box;

		.item-box {
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(223, 223, 223, 0.16);
			border-radius: 20rpx;
			padding: 28rpx 24rpx 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.title {
				padding-left: 16rpx;
				box-sizing: border-box;
				position: relative;

				text {
					font-weight: bold;
					font-size: 36rpx;
					color: #000000;
					line-height: 50rpx;
				}

				&::before {
					content: '';
					width: 6rpx;
					height: 30rpx;
					background: #E72A2A;
					border-radius: 4rpx;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.tab-btn {
				display: flex;
				margin-top: 20rpx;

				button {
					width: 144rpx;
					height: 56rpx;
					background: #FFFFFF;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 2rpx solid #B4B4B4;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 56rpx;
					margin-right: 20rpx;

					&.select {
						background: #E72A2A;
						border-color: #E72A2A;
						color: #FFFFFF;
					}
				}
			}

			.dete-select {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;

				/deep/ .uni-date {
					width: calc(50% - 21rpx) !important;
				}

				.date-picker {
					width: 100%;
					height: 56rpx;
					background: #FFFFFF;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 2rpx solid #B4B4B4;
					display: flex;
					align-items: center;
					padding: 0 20rpx;
					box-sizing: border-box;
					position: relative;

					text {
						display: block;
						width: calc(100% - 30rpx);
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;

						&.placeholder {
							color: #B4B4B4;
						}
					}

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}

				text {
					font-weight: 400;
					font-size: 36rpx;
					color: #000000;
					padding: 0 12rpx;
				}
			}

			.charts {
				margin-top: 40rpx;
				position: relative;
				z-index: inherit;
			}
		}
	}
</style>